<template>
  <div class="dialog-body">
    <div ref="leftDiv" class="dialog-left">
      <span class="user-list-title">{{ leftTitle }}</span>
      <el-input
        v-if="search"
        v-model="leftSearchData"
        size="mini"
        clearable
        :placeholder="leftPlaceholder"
        @input="leftInput($event)"
        @clear="leftClear($event)"
      />
      <div :style="{height: leftHeight}" class="user-list-div">
        <slot name="left-list" />
      </div>
    </div>
    <div class="dialog-middle">
      <div class="dialog-middle-button">
        <operation-btn :btn-list="operationBtn" class="report-add" @handleClickBtn="handleClickBtn" />
      </div>
    </div>
    <div class="dialog-right">
      <span class="user-list-title">{{ rightTitle }}</span>
      <el-input
        v-if="search"
        v-model="rightSearchData"
        size="mini"
        clearable
        :placeholder="rightPlaceholder"
        @input="rightInput($event)"
        @clear="rightClear"
      />
      <div :style="{height: leftHeight}" class="user-list-div">
        <slot name="right-list" />
      </div>
    </div>
  </div>
</template>

<script>
/**
  使用方法：
  <transfer-form
    left-title="左标题"
    right-title="右标题"
    left-placeholder="输入出单中心"
    right-placeholder="输入出单中心"
    :operation-btn="configBtn"
    @leftInput="leftContent=$event,nameInput($event, 0)"
    @rightInput="rightContent=$event,nameInput($event, 1)"
    @add="centerAdd(0)"
    @cancel="centerAdd(1)"
  >
    <div slot="left-list">
      <el-button v-for="item in centerList" :key="item.centerId" type="text" class="report-list" :class="buttonActive === item.centerCode ? 'active' : 'normal'" @click="listChoose(item, 0)">{{ item.centerName }}</el-button>
    </div>
    <div slot="right-list">
      <el-button v-for="item in selectedcenter" :key="item.centerId" type="text" class="report-list" :class="buttonActive === item.centerCode ? 'active' : 'normal'" @click="listChoose(item, 1)">{{ item.centerName }}</el-button>
    </div>
  </transfer-form>
  说明：
  operation-btn：中间的按钮
 */
import { OperationBtn } from '@/components/index'
export default {
  components: { OperationBtn },
  props: {
    leftTitle: {
      default: '',
      type: String
    },
    rightTitle: {
      default: '',
      type: String
    },
    leftPlaceholder: {
      default: '',
      type: String
    },
    rightPlaceholder: {
      default: '',
      type: String
    },
    operationBtn: {
      default: () => [],
      type: Array
    },
    search: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      leftSearchData: '',
      rightSearchData: '',
      leftHeight: ''
    }
  },
  mounted() {
    this.heightChange()
    window.addEventListener('resize', this.heightChange)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.heightChange)
  },
  methods: {
    leftInput: function(data) {
      this.$emit('leftInput', data)
    },
    add: function() {
      this.$emit('add')
    },
    cancel: function() {
      this.$emit('cancel')
    },
    rightInput: function(data) {
      this.$emit('rightInput', data)
    },
    leftClear: function() {
      this.leftSearchData = ''
      this.$emit('leftClear')
    },
    rightClear: function() {
      this.rightSearchData = ''
      this.$emit('rightClear')
    },
    handleClickBtn: function(val) {
      switch (val) {
        case 'add':
          this.add()
          break
        case 'delete':
          this.cancel()
          break
        default:
          this.$warnMsg('未配置该功能')
          break
      }
    },
    heightChange: function() {
      this.$nextTick(() => {
        const queryHeight = this.search ? 28 : 0
        this.leftHeight = this.$refs.leftDiv.clientHeight - queryHeight - 30 + 'px'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 300px);
  width: 100%;
  overflow: hidden;
  display: flex;
}
.dialog-left {
  width: 40%;
  height: 100%;
  float: left;
  border: 1px solid rgb(193, 222, 250);
  border-radius: 4px;
}
.dialog-middle {
  height: 100%;
  width: 27%;
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-middle-button {
    text-align: center;
  }
}
.user-list-title {
  display: inline-block;
  width: 100%;
  line-height: 26px;
  text-align: center;
  color: rgb(151, 148, 150);
  font-weight: 600;
  font-family:inherit;
  border-bottom: 1px solid rgb(234,238,244);
}
.user-list-div {
  margin: 0px;
  overflow: auto;
}
.dialog-right {
  float: left;
  height: 100%;
  width: 40%;
  border: 1px solid rgb(193, 222, 250);
  border-radius: 4px;
}
</style>
<style lang="scss">
.report-add {
  display: flex;
  flex-direction: column;
  .el-button {
    margin: 0 3px 7px 3px;
  }
}
</style>
